{js:artTemplate}
<div class="breadcrumbs" id="breadcrumbs">
	<ul class="breadcrumb">
		<li>
			<i class="home-icon fa fa-home"></i>
			<a href="#">系统</a>
		</li>
		<li>
			<a href="#">网站管理</a>
		</li>
		<li class="active">首页幻灯片</li>
	</ul>
</div>

<div class="content">
	<form action='{url:/system/banner_update}' method='post' enctype="multipart/form-data">
    	<table class="table list-table" id='slide_box'>
    		<colgroup>
                <col width="280px" />
                <col width="280px" />
                <col width="280px" />
                <col width="150px" />
            </colgroup>

    	    <thead>
	            <tr>
					<th>名称</th>
					<th>链接地址</th>
					<th>图片文件</th>
					<th>操作</th>
	            </tr>
            </thead>

            <tbody></tbody>

            <tfoot>
            	<tr>
            		<td colspan="4">
            			<button type="button" class="btn btn-primary" onclick="add_slide();">新加一个</button>
            			<button type="submit" class="btn btn-primary">保存数据</button>
            		</td>
            </tfoot>

			<!--导航行模板-->
			<script type='text/html' id='slideTrTemplate'>
			<tr>
				<td>
					<input type='text' name='banner_name[]' class='form-control' value='<%=name%>' pattern='required' />
				</td>
				<td>
					<input type='text' name='banner_url[]' class='form-control' value='<%=url%>' pattern='required' />
				</td>
				<td>
					<%if(img){%><img src="{url:}<%=img%>" width="150px" /><br /><%}%>
					<input type='file' name='banner_pic[]' class='form-control' />
					<input type="hidden" value="<%=img%>" name="banner_img[]" />
				</td>
				<td>
					<a href="javascript:;"><i class='operator fa fa-arrow-up' alt='向上' title='向上' ></i></a>
					<a href="javascript:;"><i class='operator fa fa-arrow-down' alt='向下' title='向下'></i></a>
					<a href="javascript:;"><i class='operator fa fa-close' alt='删除' title='删除'></i></a>
				</td>
			</tr>
			</script>
        </table>
    </form>
</div>

<script type='text/javascript'>
//DOM加载完毕
$(function(){
	//生成幻灯片
	{if:$bannerData = Api::run('getBannerConf')}
	var slideList = {echo:JSON::encode($bannerData)};
	for(var index in slideList)
	{
		add_slide(slideList[index]);
	}
	{else:}
		add_slide();
	{/if}
});

//增加幻灯片
function add_slide(data)
{
    var data = data ? data : {};
	var slideTrHtml = template.render('slideTrTemplate',data);
	$('#slide_box tbody').append(slideTrHtml);
	var last_index = $('#slide_box tbody tr').size()-1;
	buttonInit(last_index,'#slide_box');
}

//操作按钮绑定
function buttonInit(indexValue,ele)
{
	ele = ele || "#guide_box";
	if(indexValue == undefined || indexValue === '')
	{
		var button_times = $(ele+' tbody tr').length;

		for(var item=0;item < button_times;item++)
		{
			buttonInit(item,ele);
		}
	}
	else
	{
		var obj = $(ele+' tbody tr:eq('+indexValue+') .operator')

		//功能操作按钮
		obj.each(
			function(i)
			{
				switch(i)
				{
					//向上排序
					case 0:
					{
						$(this).click(
							function()
							{
								var insertIndex = $(this).parent().parent().parent().prev().index();
								if(insertIndex >= 0)
								{
									$(ele+' tbody tr:eq('+insertIndex+')').before($(this).parent().parent().parent());
								}
							}
						)
					}
					break;

					//向上排序
					case 1:
					{
						$(this).click(
							function()
							{
								var insertIndex = $(this).parent().parent().parent().next().index();
								$(ele+' tbody tr:eq('+insertIndex+')').after($(this).parent().parent().parent());
							}
						)
					}
					break;

					//删除排序
					case 2:
					{
						$(this).click(
							function()
							{
								var obj = $(this);
								art.dialog.confirm('确定要删除么？',function(){obj.parent().parent().parent().remove()});
							}
						)
					}
					break;
				}
			}
		)
	}
}
</script>